<template>
  <view class="box">
    <!-- 地址 -->
    <view class="box1">
      <dizhi></dizhi>
    </view>
    <!-- 宠物信息 -->
    <view class="box2">
      <view class="pet">宠物信息 <image class="pet1" src="../../static/image/加.png" mode=""></image>
      </view>
      <view class="box21">
        <view class="bxo1left">
          <image src="/static/image/狗.jpg" mode="" />
        </view>
        <view class="bxo1right">
          <view class="bxo1right1">
            这是宠物名称
            <uv-icon name="trash" size="20px"></uv-icon>
          </view>
          <view class="bxo1right2">
            狗狗
          </view>
        </view>
      </view>
      <view class="box22">
        <view class="">上门时间</view>
        <view style="color: #c0c0c0; display: flex; align-items: center;">请选择上门时间<uv-icon name="arrow-right"
            size="16px"></uv-icon></view>
      </view>
    </view>
    <view class="box3">
      <view class="box31">
        <view class="bxo1left">
          <image src="/static/image/狗.jpg" mode="" />
        </view>
        <view class="bxo1right">
          <view class="bxo1right1">
            服务名称服务名称
          </view>
          <view class="bxo1right2">
            ￥80/次<view class="color">会员价￥56</view>
          </view>
        </view>

      </view>
      <view class="box22">
        <view class="">优惠券</view>
        <view style="color: #c0c0c0; display: flex; align-items: center;">请选择优惠券<uv-icon name="arrow-right"
            size="16px"></uv-icon></view>
      </view>
    </view>
    <!--  备注信息-->
    <view class="box4">
      <view class="">备注信息(150字以内)</view>
      <textarea placeholder="请输入" cols="30" rows="10"></textarea>
    </view>
    <!-- 支付方式 -->
    <view class="box4">
      <view class="">选择支付方式</view>
      <view class="box41">
        <view class="left">
          <view class="photo">
            <image src="../../static/image/微信.png" mode=""></image>
          </view>
          <view style="margin-left: 20rpx;">微信支付</view>
        </view>
        <view class="right">
          <uv-radio-group>
            <uv-radio name="1" activeColor="#008c8c"></uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <view class="box41">
        <view class="left">
          <view class="photo">
            <image src="../../static/image/余额.png" mode=""></image>
          </view>
          <view style="margin-left: 20rpx;">余额支付</view>
        </view>
        <view class="right">
          <uv-radio-group>
            <uv-radio name="2" activeColor="#008c8c"></uv-radio>
          </uv-radio-group>

        </view>
      </view>
    </view>
    <!--  支付方式-->
    <view class="box5">
      <view class="box51">
        <view class="box51-left">
          <view>实付</view>
          <view style="color: red;display: flex; align-items: center;">￥<view style="font-size: 1.1rem;">200</view>
          </view>
        </view>
        <view class="box51-right">
          <button class="but" @click="jump">去结算</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import dizhi from "@/components/dizhi/dizhi.vue"
  components: {
    dizhi
  }
  const jump = (() => {
    // console.log(e);
    uni.navigateTo({
      url: '/pages/obligations/obligations'
    });
  })
</script>

<style lang="scss">
  @import url("confirmorder.scss");
</style>